<template>
  <van-dropdown-menu>
  <van-dropdown-item :model-value="filters.sort" @update:model-value="handleChangeSort" :options="sortOptions" />
  <van-dropdown-item title="筛选" ref="first">
    <van-checkbox-group :model-value="filters.first"  @update:model-value="handleChangeFirst">
      <van-cell-group inset>
        <van-cell
          v-for="(item, index) in firstOptions"
          clickable
          :key="item.value"
          :title="item.text"
          @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox
              :name="item.value"
              :ref="el => checkboxRefs[index] = el"
            />
          </template>
        </van-cell>
      </van-cell-group>
</van-checkbox-group>
  </van-dropdown-item>
</van-dropdown-menu>
</template>
<script lang="ts" setup>
import type { IProps } from '@/components/CommonList/index.vue';
import { first } from 'lodash';
import {ref,defineProps} from 'vue'
import  type {ISearshFiltersparams,ISortAndFirst} from '../../server'
export interface IPropsFilter{
  filters:ISearshFiltersparams
}
export interface IEmits{
  (e:'update:filters',filters:ISearshFiltersparams):void
}
const {filters} =defineProps<IPropsFilter>()
const emits=defineEmits<IEmits>()
const checkboxRefs = ref<any[]>([]);
  const toggle = (index:number) => {
    checkboxRefs.value[index].toggle();
  };
const sortOptions = [
  { text: '综合', value: 0 },
  { text: '价格最低', value: 1 },
  { text: '价格最高', value: 2 },
];
const firstOptions = [
  { text: '有货优先', value: 0 },
  { text: '京东国际', value: 1 },
  { text: '货到付款', value: 2 },
];
const  handleChangeSort=(e:ISortAndFirst)=>{
  filters.sort=e
  emits('update:filters',filters)
}
const  handleChangeFirst=(e:ISortAndFirst[])=>{
  filters.first=e
  emits('update:filters',filters)
}
</script>